<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> JavaScript阻止时间冒泡传递测试 </title>
  <meta name="author" content="http://blog.csdn.net/xxd851116" />
  <meta charset='utf-8' />
  <mce:style type="text/css"><!--
	div {padding:10px; border:1px solid #EEE;margin:10px;}
  
--></mce:style><style type="text/css" mce_bogus="1">	div {padding:10px; border:1px solid #EEE;margin:10px;}
  </style>
 </head>
<body onclick="alert('Body Click');">
这是顶层Body
<div onclick="alert('Div 1 Click');">
 这是第1层
 <div onclick="alert('Div 2A Click');">这是第2层A
	<input type="button" onclick="alert('Button Click');stopBubble(event)" value="点击测试时间冒泡(阻止)！" />
 </div>
 <div onclick="alert('Div 2B Click');">这是第2层B
	<input type="button" onclick="alert('Button Click');" value="点击测试时间冒泡(未阻止)！" />
 </div>
</div>
<mce:script type="text/javascript"><!--
var all = document.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
      //监听用户鼠标,当移动到元素上时
      //为元素加上红色边框
      all[i].onmouseover = function(e) {
           this.style.border="1px solid red";
           stopBubble(e);
       }
      //检查用户鼠标,当移开元素时
      //删除我们加上的边框
      all[i].onmouseout = function(e) {
           this.style.border = "1px solid #EEE";
           stopBubble(e);
      }
}
function stopBubble(e) {
	var e = e ? e : window.event;
	if (window.event) { // IE
		e.cancelBubble = true; 
	} else { // FF
		//e.preventDefault(); 
		e.stopPropagation(); 
	} 
}
// --></mce:script>
 </body>
</html>
